<template>
  <el-menu
    router
    :default-active="$route.path"
    class="aside_el_menu"
    text-color="#fff"
    active-text-color="#fff"
  >
    <AsideBarItem v-for="router in routers" :key="router.path" :router="router">
    </AsideBarItem>
  </el-menu>
</template>

<script>
import AsideBarItem from './asideBarItem'
export default {
  name: 'mynav',
  components: {
    AsideBarItem
  },
  data () {
    return {}
  },
  computed: {
    routers () {
      const targetRouters =
        this.$router.options.routes.find((x) => x.name === 'contentLayout') ||
        {}

      return targetRouters.children || []
    }
  }
}
</script>

<style>
.aside_el_menu.el-menu {
  background: transparent;
}
/* 
.aside_el_menu .el-menu-item {
  background: #d2e7f9;
  color: #000 !important;
}
.aside_el_menu .el-submenu__title:hover,
.aside_el_menu .el-menu-item:hover,
.aside_el_menu .el-menu-item.is-active {
  background: #98c2e7;
} */
</style>
